<template>
  <el-card>
    <el-row class="m-b-8 m-t-2">
      <el-button
        type="primary"
        size="large"
        :icon="RefreshRight"
        @click="handleRefresh"
      >
        刷新
      </el-button>
      <p class="timer">
        科二累计时长：{{ subjectTime2 }}&nbsp;&nbsp;&nbsp;&nbsp;科三累计时长：{{
          subjectTime3
        }}
      </p>
    </el-row>
    <el-row>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        show-overflow-tooltip
        fit
        border
        table-layout="auto"
      >
        <el-table-column
          label="序号"
          type="index"
          width="58"
          header-align="center"
          align="center"
        />

        <el-table-column
          label="训练学员姓名"
          width="110"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.stuname }}</template>
        </el-table-column>

        <el-table-column
          label="培训教练"
          width="90"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.coachname }}</template>
        </el-table-column>

        <el-table-column
          label="训练车辆"
          width="120"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.license }}</template>
        </el-table-column>

        <el-table-column
          label="收费类型"
          width="90"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.subjectState }}</template>
        </el-table-column>

        <el-table-column
          label="科目"
          width="100"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <el-tag
              effect="plain"
              type="danger"
              v-if="scope.row.object === '科目一'"
            >
              {{ scope.row.object }}
            </el-tag>
            <el-tag effect="plain" v-if="scope.row.object === '科目二'">
              {{ scope.row.object }}
            </el-tag>
            <el-tag
              effect="plain"
              type="warning"
              v-if="scope.row.object === '科目三'"
            >
              {{ scope.row.object }}
            </el-tag>
            <el-tag
              effect="plain"
              type="success"
              v-if="scope.row.object === '科目四'"
            >
              {{ scope.row.object }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="核对状态"
          width="100"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <el-tag
              effect="dark"
              type="info"
              v-if="scope.row.isCollate == '未核对'"
            >
              {{ scope.row.isCollate }}
            </el-tag>
            <el-tag effect="dark" type="success" v-else>
              {{ scope.row.isCollate }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="训练编码"
          width="150"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.Dirsingle }}</template>
        </el-table-column>

        <el-table-column
          label="预约时间"
          width="120"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.ordertime }}</template>
        </el-table-column>

        <el-table-column
          label="开始时间"
          width="150"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.startTime }}</template>
        </el-table-column>

        <el-table-column
          label="结束时间"
          width="150"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.endTime }}</template>
        </el-table-column>

        <el-table-column
          label="练车时长"
          width="100"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.tratime }}</template>
        </el-table-column>

        <el-table-column
          label="备注"
          width="150"
          header-align="center"
          align="center"
        >
          <template #default="scope">{{ scope.row.comment }}</template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="250"
          header-align="center"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              round
              size="small"
              :icon="SuccessFilled"
              @click="handleCollate(row)"
              v-if="row.isCollate === '未核对'"
              >核对</el-button
            >
            <el-button
              type="info"
              round
              size="small"
              :icon="SuccessFilled"
              disabled
              @click="handleCollate(row)"
              v-else
              >已核
            </el-button>
            <el-button type="warning" round size="small" :icon="Printer"
              >打单</el-button
            >
            <el-button
              type="danger"
              round
              size="small"
              :icon="Close"
              @click="handleDelete(row)"
              >作废</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <el-config-provider :locale="locale" v-if="total">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 30, 40, 50]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import locale from "element-plus/es/locale/lang/zh-cn";
import { ref, onMounted } from "vue";
import {
  RefreshRight,
  SuccessFilled,
  Close,
  Printer,
} from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  StuTeanGet,
  StuTranGet,
  TranDeletet,
  TranPut,
} from "../../../api/students";
// 分页条
const currentPage = ref(1);
// 每页显示条数
const pageSize = ref(10);
const total = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  StuTeanGet(currentPage.value, val, id).then((res) => {
    tableData.value = res.data.results;
    total.value = res.data.count;
  });
};
const handleCurrentChange = (val: number) => {
  // console.log(`当前页码: ${val}`)
  currentPage.value = val;
  StuTeanGet(val, pageSize.value, id).then((res) => {
    // console.log(res);
    tableData.value = res.data.results;
    total.value = res.data.count;
  });
};
const tableData = ref<any>(null);
onMounted(() => {
  StuTranGet(id).then((res) => {
    tableData.value = res.data.results;
    total.value = res.data.results.length;

    res.data.results.forEach((item: any) => {
      if (item.object == "科目二") {
        subjectTime2.value += item.tratime;
      }
    });
    res.data.results.forEach((item: any) => {
      if (item.object == "科目三") {
        subjectTime3.value += item.tratime;
      }
    });
  });
});
// console.log(tableData);
const route = useRoute();
let id = route.query.objectId as string;
// 刷新数据
const handleRefresh = () => {
  StuTranGet(id).then((res) => {
    tableData.value = res.data.results;
  });
};

// 核对训练单
const handleCollate = (row: any) => {
  const collate = { isCollate: "平台核对" };
  ElMessageBox.confirm("确认核对此记录?", "练车单核对", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    center: true,
    type: "warning",
  })
    .then(() => {
      TranPut(row.objectId, collate).then(() => {
        StuTranGet(id).then((res) => {
          tableData.value = res.data.results;
          total.value = res.data.results.length;
        });
        ElMessage({
          type: "success",
          message: "核对成功",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

// 删除训练单
const handleDelete = (row: any) => {
  ElMessageBox.confirm("是否作废练车单?", "作废练车单", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      TranDeletet(row.objectId).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        for (let i in tableData.value) {
          if (tableData.value[i].objectId == row.objectId) {
            delete tableData.value[i];
          }
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

//统计练车时长
let subjectTime2 = ref<number>(0);
let subjectTime3 = ref<number>(0);
</script>

<style scoped>
.timer {
  color: #666666;
  font-size: 16px;
  font-weight: lighter;
  margin-left: 20px;
  margin-top: 20px;
}
</style>